<template>
  <div class="app-container">
		<div id="signSure" class="signSure">
			<canvas class="whiteBord" id="whiteBord">
			</canvas>

			<!-- {{ clientWidth }} {{ clientHeight }} --- {{ info }} -->
			<div class="btnBox">
				<div class="colorBox">
					<div class="color"
						v-for="(item, index) in colorList"
						:key="index"
						@click="changeColor(index)"
						:class="selected == index && 'selected'"
						:style="`background: ${item}`">
					</div>
				</div>
				<font-size @change="handleChangeSlider" />
				<button class="primaryBtn" id="againWrite">清空</button>
				<button class="primaryBtn activeBtn" id="sureWrite">上传签名</button>
			</div>

		</div>
  </div>
</template>

<script>
import {signature, changeOri} from "./signature";
import {handwritingByUserId} from "@/api/basicData/seal";
import FontSize from './components/fontSize'

export default {
  name: "hands",
	components: {
		FontSize
	},
  data() {
    return {
			userId: null,
			info: "", /* 画布宽高 */
			// clientWidth: 0, /* 浏览器宽 */
			// clientHeight: 0, /* 浏览器高 */
			colorList: ["#000", 'red', 'blue'], /* 颜色列表 */
			selected: 0, /* 选中的颜色 */
			value: 8,
    };
  },
  mounted() {
		this.userId = this.$route.query.userId;
		this.bind();
		this.handler();
		this.addMeta()
		window.addEventListener('resize', () => {
			this.handler();
		});
  },
  methods: {
		addMeta() {
			const meta = document.createElement('meta');
			meta.setAttribute('name', 'screen-orientation');
			meta.setAttribute('content', 'portrait');
			document.head.appendChild(meta);

			const meta1 = document.createElement('meta');
			meta1.setAttribute('name', 'x5-orientation');
			meta1.setAttribute('content', 'portrait');
			document.head.appendChild(meta1);
		},
		// 手写签名
		bind() {
			let params = {
				whiteBord:'whiteBord',//canvas标签的id名称
				againWrite:'againWrite',//重写按钮id名
				sureWrite:'sureWrite',//确认按钮id名
				maxFonts: 20,
				minFonts: 16,
				sureWriteCallback: (imageBase64) => { // 签名完成后的回调函数
					this.suresign(imageBase64);
				},
			}
			signature(params);
		},
		handleChangeSlider(val) {
			changeOri('changeSize', null, {
				maxFonts: val,
				minFonts: val - 4
			})
		},
		// 旋转页面
		handler() {
			let clientWidth = document.documentElement.clientWidth; /* 浏览器宽度 不包含导航栏 */
			let clientHeight = document.documentElement.clientHeight; /* 浏览器高度 */
			// this.clientWidth = clientWidth; /* 412, 721, 828,357 */
			// this.clientHeight = clientHeight;
			let targetDom = document.querySelector(".signSure");
			if (!targetDom) return;

			if (window.orientation != 0) { /* 横屏 */
				targetDom.style.width = `${clientWidth}px`;
				targetDom.style.height = `${clientHeight}px`;
				targetDom.style.transform = 'translate(-50%, -50%)';
				this.info = changeOri("landscape");
			} else { /* 竖屏 */
				targetDom.style.width = `${clientHeight}px`;
				targetDom.style.height = `${clientWidth}px`;
				targetDom.style.transform = 'translate(-50%, -50%) rotate(90deg)';
				this.info = changeOri("notlandscape");
			}
		},
		// 签名完成
		suresign(imageBase64) {
			console.log("imageBase64", imageBase64);
			if(imageBase64 != "empty") {
				let base64 = imageBase64;
				let blob =  this.dataURLtoBlob(base64);
				console.log("blob",blob);
				// 拿到文件名
				let fileName = "handsfile";
				// 转为 file类型
				let file1 = this.blobToFile(blob, fileName);
				console.log("file1:",file1);

				let fd = new FormData()
				fd.append("file", file1);
				fd.append("userId", this.userId);
				handwritingByUserId(fd).then(response => {
					this.$modal.msgSuccess({
						customClass: 'elMessage',
						message: "上传成功"
					});
				});
			}else {
				this.$modal.msgWarning({
					customClass: 'elMessage',
					message: "签名不能为空",
				});
			}
		},
		// 将base64转换为blob
		dataURLtoBlob(dataurl) {
			var arr = dataurl.split(','),
				mime = arr[0].match(/:(.*?);/)[1],
				bstr = atob(arr[1]),
				n = bstr.length,
				u8arr = new Uint8Array(n);
			while (n--) {
				u8arr[n] = bstr.charCodeAt(n);
			}
			return new Blob([u8arr], { type: mime });
		},
		// 将blob转换为file
		blobToFile(theBlob, fileName){
			theBlob.lastModifiedDate = new Date();  // 文件最后的修改日期
			theBlob.name = fileName;                // 文件名
			return new File([theBlob], fileName, {type: theBlob.type, lastModified: Date.now()});
		},
		// 更改颜色
		changeColor(index) {
			this.selected = index;
			changeOri("changeColor", this.colorList[index]);
		}

	}
};
</script>
<style lang="scss" scoped>
.app-container {
	height: 100%;
}
.signSure{
	width: 100vh;
	height: 100vw;
	position: absolute;
	top: 50%;
	left: 50%;
	// transform: translate(-50%, -50%) rotate(90deg);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.whiteBord{
		width: 100%;
		height: calc(100% - 60px);
		border-bottom: 1px solid #d3d3d3;
		background: #f6f6f6;
		background: #f6f6f6;
	}
	.btnBox{
		// padding: 0 7px;
		padding: 10px 50px 10px 50px;
		display: flex;
		// background-color: #c2c3c4;
		justify-content: space-between;

		.primaryBtn{
			width: 45%;
			height: 40px;
			color: #666;
			border: 1px solid #ccc;
			border-radius: 4px;
			background: #fff;
			cursor: pointer;
			transition: .4s cubic-bezier(.175, .885, .32, 1);
			transition-property: background, border, box-shadow, outline, opacity;

			&:hover {
				background-color: #dedede;
				border-color: #a1a1a1;
				box-shadow: 0 2px 1px rgba(0, 0, 0, .1);
			}
			&:nth-of-type(1) {
				margin-right: 30px;
			}
		}
		.activeBtn{
			background: #2A72EE;
			color: #fff;
			border: none;
			&:hover {
				background-color: #46a6ff;
			}
		}
	}
}
.colorBox {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
	.color {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		margin-right: 10px;
	}
	.selected {
		transform: scale(1.3);
	}
}
::v-deep .el-message--warning {
	transform: rotate(90deg);
	top: 100px;

}
.warning {
	position: absolute;
	height: 30px;
	line-height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3px;
	top: 20px;
	right: 50%;
	transform: translateX(50%);
	background-color: #fff8e6;
	color: #2A72EE;
	font-size: 12px;
	padding-inline: 30px;
}
</style>
<style>

.elMessage{

	top: calc(50% - 40px) !important;
	transform: rotate(90deg);
	left: 36vw;
}
</style>

